<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta name="theme-color" content="#222" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#222" media="(prefers-color-scheme: dark)"><meta name="generator" content="Hexo 5.2.0">


  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">

<link rel="stylesheet" href="/css/main.css">



<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" integrity="sha256-xejo6yLi6vGtAjcMIsY8BHdKsLg7QynVlFMzdQgUuy8=" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.1/animate.min.css" integrity="sha256-PR7ttpcvz8qrF57fur/yAx1qXMFJeJFiA6pSzWi0OIE=" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" integrity="sha256-Vzbj7sDDS/woiFS3uNKo8eIuni59rjyNGtXfstRzStA=" crossorigin="anonymous">

<script class="next-config" data-name="main" type="application/json">{"hostname":"gz1234.gitee.io","root":"/","images":"/images","scheme":"Gemini","darkmode":true,"version":"8.12.3","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12},"copycode":{"enable":true,"style":"flat"},"bookmark":{"enable":true,"color":"#222","save":"auto"},"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"stickytabs":false,"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"fadeInDown","post_body":"fadeInDown","coll_header":"fadeInLeft","sidebar":"fadeInUp"}},"prism":false,"i18n":{"placeholder":"搜索...","empty":"没有找到任何搜索结果：${query}","hits_time":"找到 ${hits} 个搜索结果（用时 ${time} 毫秒）","hits":"找到 ${hits} 个搜索结果"},"path":"/search.xml","localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false}}</script><script src="/js/config.js"></script>

    <meta name="description" content="JS模块化方面的不足 # JS没有模块系统，不支持封闭的作用域和依赖管理 没有标准库，没有文件系统和IO流API 也没有包管理系统  CommonJS规范 # 封装功能 封闭作用域 可能解决依赖问题 工作效率更高，重构方便  Node中的CommonJS # 在node.js 里，模块划分所有的功能，每个JS都是一个模块 实现require方法,NPM实现了模块的自动加载和安装依赖">
<meta property="og:type" content="article">
<meta property="og:title" content="module&amp;NPM">
<meta property="og:url" content="https://gz1234.gitee.io/2022/07/09/%E5%89%8D%E7%AB%AF%E8%AE%B0%E5%BD%95%E6%95%B4%E7%90%86/module&NPM/index.html">
<meta property="og:site_name" content="郭泽">
<meta property="og:description" content="JS模块化方面的不足 # JS没有模块系统，不支持封闭的作用域和依赖管理 没有标准库，没有文件系统和IO流API 也没有包管理系统  CommonJS规范 # 封装功能 封闭作用域 可能解决依赖问题 工作效率更高，重构方便  Node中的CommonJS # 在node.js 里，模块划分所有的功能，每个JS都是一个模块 实现require方法,NPM实现了模块的自动加载和安装依赖">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://gz1234.gitee.io/2022/07/09/%E5%89%8D%E7%AB%AF%E8%AE%B0%E5%BD%95%E6%95%B4%E7%90%86/module&NPM/lookmodule.png">
<meta property="og:image" content="https://gz1234.gitee.io/2022/07/09/%E5%89%8D%E7%AB%AF%E8%AE%B0%E5%BD%95%E6%95%B4%E7%90%86/module&NPM/lookfile.png">
<meta property="article:published_time" content="2022-07-08T18:21:52.000Z">
<meta property="article:modified_time" content="2022-11-16T02:09:11.881Z">
<meta property="article:author" content="郭泽">
<meta property="article:tag" content="module&amp;NPM">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://gz1234.gitee.io/2022/07/09/%E5%89%8D%E7%AB%AF%E8%AE%B0%E5%BD%95%E6%95%B4%E7%90%86/module&NPM/lookmodule.png">


<link rel="canonical" href="https://gz1234.gitee.io/2022/07/09/%E5%89%8D%E7%AB%AF%E8%AE%B0%E5%BD%95%E6%95%B4%E7%90%86/module&NPM/">



<script class="next-config" data-name="page" type="application/json">{"sidebar":"","isHome":false,"isPost":true,"lang":"zh-CN","comments":true,"permalink":"https://gz1234.gitee.io/2022/07/09/%E5%89%8D%E7%AB%AF%E8%AE%B0%E5%BD%95%E6%95%B4%E7%90%86/module&NPM/","path":"2022/07/09/前端记录整理/module&NPM/","title":"module&NPM"}</script>

<script class="next-config" data-name="calendar" type="application/json">""</script>
<title>module&NPM | 郭泽</title>
  





  <noscript>
    <link rel="stylesheet" href="/css/noscript.css">
  </noscript>
</head>

<body itemscope itemtype="http://schema.org/WebPage" class="use-motion">
  <div class="headband"></div>

  <main class="main">
    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏" role="button">
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <i class="logo-line"></i>
      <p class="site-title">郭泽</p>
      <i class="logo-line"></i>
    </a>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
        <i class="fa fa-search fa-fw fa-lg"></i>
    </div>
  </div>
</div>



<nav class="site-nav">
  <ul class="main-menu menu"><li class="menu-item menu-item-home"><a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a></li><li class="menu-item menu-item-about"><a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a></li><li class="menu-item menu-item-tags"><a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a></li><li class="menu-item menu-item-categories"><a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a></li><li class="menu-item menu-item-archives"><a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a></li>
      <li class="menu-item menu-item-search">
        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
        </a>
      </li>
  </ul>
</nav>



  <div class="search-pop-overlay">
    <div class="popup search-popup"><div class="search-header">
  <span class="search-icon">
    <i class="fa fa-search"></i>
  </span>
  <div class="search-input-container">
    <input autocomplete="off" autocapitalize="off" maxlength="80"
           placeholder="搜索..." spellcheck="false"
           type="search" class="search-input">
  </div>
  <span class="popup-btn-close" role="button">
    <i class="fa fa-times-circle"></i>
  </span>
</div>
<div class="search-result-container no-result">
  <div class="search-result-icon">
    <i class="fa fa-spinner fa-pulse fa-5x"></i>
  </div>
</div>

    </div>
  </div>

</div>
        
  
  <div class="toggle sidebar-toggle" role="button">
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
  </div>

  <aside class="sidebar">

    <div class="sidebar-inner sidebar-nav-active sidebar-toc-active">
      <ul class="sidebar-nav">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <div class="sidebar-panel-container">
        <!--noindex-->
        <div class="post-toc-wrap sidebar-panel">
            <div class="post-toc animated"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#JS%E6%A8%A1%E5%9D%97%E5%8C%96%E6%96%B9%E9%9D%A2%E7%9A%84%E4%B8%8D%E8%B6%B3"><span class="nav-number">1.</span> <span class="nav-text">JS模块化方面的不足 </span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#CommonJS%E8%A7%84%E8%8C%83"><span class="nav-number">2.</span> <span class="nav-text">CommonJS规范 </span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Node%E4%B8%AD%E7%9A%84CommonJS"><span class="nav-number">3.</span> <span class="nav-text">Node中的CommonJS </span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%A8%A1%E5%9D%97%E5%88%86%E7%B1%BB"><span class="nav-number">4.</span> <span class="nav-text">模块分类 </span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%8E%9F%E7%94%9F%E6%A8%A1%E5%9D%97"><span class="nav-number">4.1.</span> <span class="nav-text">原生模块 </span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%96%87%E4%BB%B6%E6%A8%A1%E5%9D%97"><span class="nav-number">4.2.</span> <span class="nav-text">文件模块 </span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AC%AC%E4%B8%89%E6%96%B9%E6%A8%A1%E5%9D%97"><span class="nav-number">4.3.</span> <span class="nav-text">第三方模块 </span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%85%A8%E5%B1%80%E7%9B%AE%E5%BD%95"><span class="nav-number">4.3.1.</span> <span class="nav-text">. 全局目录 </span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%A8%A1%E5%9D%97%E7%9A%84%E5%8A%A0%E8%BD%BD%E7%AD%96%E7%95%A5"><span class="nav-number">4.4.</span> <span class="nav-text">模块的加载策略 </span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%96%87%E4%BB%B6%E6%A8%A1%E5%9D%97%E6%9F%A5%E6%89%BE%E8%A7%84%E5%88%99"><span class="nav-number">4.5.</span> <span class="nav-text">文件模块查找规则 </span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BB%8E%E6%A8%A1%E5%9D%97%E5%A4%96%E9%83%A8%E8%AE%BF%E9%97%AE%E6%A8%A1%E5%9D%97%E5%86%85%E7%9A%84%E6%88%90%E5%91%98"><span class="nav-number">5.</span> <span class="nav-text">从模块外部访问模块内的成员 </span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%A8%A1%E5%9D%97%E5%AF%B9%E8%B1%A1%E7%9A%84%E5%B1%9E%E6%80%A7"><span class="nav-number">6.</span> <span class="nav-text">模块对象的属性 </span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%8C%85"><span class="nav-number">7.</span> <span class="nav-text">包 </span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#NPM"><span class="nav-number">8.</span> <span class="nav-text">NPM </span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#npm%E6%8F%90%E4%BE%9B%E7%9A%84%E5%8A%9F%E8%83%BD"><span class="nav-number">8.1.</span> <span class="nav-text">npm提供的功能 </span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#npm%E5%91%BD%E4%BB%A4"><span class="nav-number">8.2.</span> <span class="nav-text">npm命令 </span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#npm-install-%E5%AE%89%E8%A3%85%E5%8C%85"><span class="nav-number">8.2.1.</span> <span class="nav-text">(npm install)安装包 </span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%8D%B8%E8%BD%BD%E5%8C%85"><span class="nav-number">8.2.2.</span> <span class="nav-text">卸载包 </span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%9B%B4%E6%96%B0%E5%8C%85"><span class="nav-number">8.2.3.</span> <span class="nav-text">更新包 </span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%8C%85%E7%9A%84%E5%AE%89%E8%A3%85%E6%A8%A1%E5%BC%8F"><span class="nav-number">8.3.</span> <span class="nav-text">包的安装模式 </span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%9C%AC%E5%9C%B0%E5%AE%89%E8%A3%85"><span class="nav-number">8.3.1.</span> <span class="nav-text">本地安装 </span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%85%A8%E5%B1%80%E5%AE%89%E8%A3%85"><span class="nav-number">8.3.2.</span> <span class="nav-text">全局安装 </span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%B3%A8%E5%86%8C%E3%80%81%E7%99%BB%E5%BD%95%E5%92%8C%E5%8F%91%E5%B8%83%E6%A8%A1%E5%9D%97"><span class="nav-number">8.4.</span> <span class="nav-text">注册、登录和发布模块 </span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#npx"><span class="nav-number">8.5.</span> <span class="nav-text">npx </span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E8%B0%83%E7%94%A8%E9%A1%B9%E7%9B%AE%E5%AE%89%E8%A3%85%E7%9A%84%E6%A8%A1%E5%9D%97"><span class="nav-number">8.5.1.</span> <span class="nav-text">调用项目安装的模块 </span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E9%81%BF%E5%85%8D%E5%85%A8%E5%B1%80%E5%AE%89%E8%A3%85%E6%A8%A1%E5%9D%97"><span class="nav-number">8.5.2.</span> <span class="nav-text">避免全局安装模块 </span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E2%80%93no-install-%E5%8F%82%E6%95%B0%E5%92%8C%E2%80%93ignore-existing-%E5%8F%82%E6%95%B0"><span class="nav-number">8.5.3.</span> <span class="nav-text">–no-install 参数和–ignore-existing 参数 </span></a></li></ol></li></ol></li></ol></div>
        </div>
        <!--/noindex-->

        <div class="site-overview-wrap sidebar-panel">
          <div class="site-author site-overview-item animated" itemprop="author" itemscope itemtype="http://schema.org/Person">
  <p class="site-author-name" itemprop="name">郭泽</p>
  <div class="site-description" itemprop="description"></div>
</div>
<div class="site-state-wrap site-overview-item animated">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
        <a href="/archives/">
          <span class="site-state-item-count">54</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
          <a href="/categories/">
        <span class="site-state-item-count">21</span>
        <span class="site-state-item-name">分类</span></a>
      </div>
      <div class="site-state-item site-state-tags">
          <a href="/tags/">
        <span class="site-state-item-count">51</span>
        <span class="site-state-item-name">标签</span></a>
      </div>
  </nav>
</div>



        </div>
      </div>
    </div>
  </aside>
  <div class="sidebar-dimmer"></div>


    </header>

    
  <div class="back-to-top" role="button" aria-label="返回顶部">
    <i class="fa fa-arrow-up"></i>
    <span>0%</span>
  </div>
  <a role="button" class="book-mark-link book-mark-link-fixed"></a>

<noscript>
  <div class="noscript-warning">Theme NexT works best with JavaScript enabled</div>
</noscript>


    <div class="main-inner post posts-expand">


  


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="https://gz1234.gitee.io/2022/07/09/%E5%89%8D%E7%AB%AF%E8%AE%B0%E5%BD%95%E6%95%B4%E7%90%86/module&NPM/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="郭泽">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="郭泽">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="post" itemscope itemtype="http://schema.org/CreativeWork">
      <meta itemprop="name" content="module&NPM | 郭泽">
      <meta itemprop="description" content="">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          module&NPM
        </h1>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2022-07-09 02:21:52" itemprop="dateCreated datePublished" datetime="2022-07-09T02:21:52+08:00">2022-07-09</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar-check"></i>
      </span>
      <span class="post-meta-item-text">更新于</span>
      <time title="修改时间：2022-11-16 10:09:11" itemprop="dateModified" datetime="2022-11-16T10:09:11+08:00">2022-11-16</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">分类于</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/%E5%89%8D%E7%AB%AF%E6%95%B4%E7%90%86/" itemprop="url" rel="index"><span itemprop="name">前端整理</span></a>
        </span>
    </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
        <h2 id="JS模块化方面的不足"><a href="#JS模块化方面的不足" class="headerlink" title="JS模块化方面的不足 #"></a>JS模块化方面的不足 <a href="#t01-js%E6%A8%A1%E5%9D%97%E5%8C%96%E6%96%B9%E9%9D%A2%E7%9A%84%E4%B8%8D%E8%B6%B3">#</a></h2><ul>
<li>JS没有模块系统，不支持封闭的作用域和依赖管理</li>
<li>没有标准库，没有文件系统和IO流API</li>
<li>也没有包管理系统</li>
</ul>
<h2 id="CommonJS规范"><a href="#CommonJS规范" class="headerlink" title="CommonJS规范 #"></a>CommonJS规范 <a href="#t12-commonjs%E8%A7%84%E8%8C%83">#</a></h2><ul>
<li>封装功能</li>
<li>封闭作用域</li>
<li>可能解决依赖问题</li>
<li>工作效率更高，重构方便</li>
</ul>
<h2 id="Node中的CommonJS"><a href="#Node中的CommonJS" class="headerlink" title="Node中的CommonJS #"></a>Node中的CommonJS <a href="#t23-node%E4%B8%AD%E7%9A%84commonjs">#</a></h2><ul>
<li>在node.js 里，模块划分所有的功能，每个JS都是一个模块</li>
<li>实现require方法,NPM实现了模块的自动加载和安装依赖<a id="more"></a>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">(<span class="function"><span class="keyword">function</span>(<span class="params"><span class="built_in">exports</span>,<span class="built_in">require</span>,<span class="built_in">module</span>,__filename,__dirname</span>)</span>&#123;</span><br><span class="line">  <span class="built_in">exports</span> = <span class="built_in">module</span>.exports=&#123;&#125;</span><br><span class="line">  <span class="built_in">exports</span>.name = <span class="string">&#x27;zfpx&#x27;</span>;</span><br><span class="line">  <span class="built_in">exports</span> = &#123;<span class="attr">name</span>:<span class="string">&#x27;zfpx&#x27;</span>&#125;;</span><br><span class="line">  <span class="keyword">return</span> <span class="built_in">module</span>.exports;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

</li>
</ul>
<h2 id="模块分类"><a href="#模块分类" class="headerlink" title="模块分类 #"></a>模块分类 <a href="#t34-%E6%A8%A1%E5%9D%97%E5%88%86%E7%B1%BB">#</a></h2><h3 id="原生模块"><a href="#原生模块" class="headerlink" title="原生模块 #"></a>原生模块 <a href="#t441-%E5%8E%9F%E7%94%9F%E6%A8%A1%E5%9D%97">#</a></h3><p><code>http</code> <code>path</code> <code>fs</code> <code>util</code> <code>events</code> 编译成二进制,加载速度最快，原来模块通过名称来加载</p>
<h3 id="文件模块"><a href="#文件模块" class="headerlink" title="文件模块 #"></a>文件模块 <a href="#t542-%E6%96%87%E4%BB%B6%E6%A8%A1%E5%9D%97">#</a></h3><p>在硬盘的某个位置，加载速度非常慢，文件模块通过名称或路径来加载 文件模块的后缀有三种</p>
<ul>
<li>后缀名为.js的JavaScript脚本文件,需要先读入内存再运行</li>
<li>后缀名为.json的JSON文件,fs 读入内存 转化成JSON对象</li>
<li>后缀名为.node的经过编译后的二进制C/C++扩展模块文件,可以直接使用</li>
</ul>
<blockquote>
<p>一般自己写的通过路径来加载,别人写的通过名称去当前目录或全局的node_modules下面去找</p>
</blockquote>
<h3 id="第三方模块"><a href="#第三方模块" class="headerlink" title="第三方模块 #"></a>第三方模块 <a href="#t643-%E7%AC%AC%E4%B8%89%E6%96%B9%E6%A8%A1%E5%9D%97">#</a></h3><ul>
<li>如果require函数只指定名称则视为从node_modules下面加载文件，这样的话你可以移动模块而不需要修改引用的模块路径</li>
<li>第三方模块的查询路径包括module.paths和全局目录</li>
</ul>
<h4 id="全局目录"><a href="#全局目录" class="headerlink" title=". 全局目录 #"></a>. 全局目录 <a href="#t7431--%E5%85%A8%E5%B1%80%E7%9B%AE%E5%BD%95">#</a></h4><p>window如果在环境变量中设置了 <code>NODE_PATH</code>变量，并将变量设置为一个有效的磁盘目录，require在本地找不到此模块时向在此目录下找这个模块。 UNIX操作系统中会从 $HOME/.node_modules $HOME/.node_libraries目录下寻找</p>
<h3 id="模块的加载策略"><a href="#模块的加载策略" class="headerlink" title="模块的加载策略 #"></a>模块的加载策略 <a href="#t844-%E6%A8%A1%E5%9D%97%E7%9A%84%E5%8A%A0%E8%BD%BD%E7%AD%96%E7%95%A5">#</a></h3><p><img src="/2022/07/09/%E5%89%8D%E7%AB%AF%E8%AE%B0%E5%BD%95%E6%95%B4%E7%90%86/module&NPM/lookmodule.png"></p>
<h3 id="文件模块查找规则"><a href="#文件模块查找规则" class="headerlink" title="文件模块查找规则 #"></a>文件模块查找规则 <a href="#t945-%E6%96%87%E4%BB%B6%E6%A8%A1%E5%9D%97%E6%9F%A5%E6%89%BE%E8%A7%84%E5%88%99">#</a></h3><p><img src="/2022/07/09/%E5%89%8D%E7%AB%AF%E8%AE%B0%E5%BD%95%E6%95%B4%E7%90%86/module&NPM/lookfile.png"></p>
<h2 id="从模块外部访问模块内的成员"><a href="#从模块外部访问模块内的成员" class="headerlink" title="从模块外部访问模块内的成员 #"></a>从模块外部访问模块内的成员 <a href="#t105-%E4%BB%8E%E6%A8%A1%E5%9D%97%E5%A4%96%E9%83%A8%E8%AE%BF%E9%97%AE%E6%A8%A1%E5%9D%97%E5%86%85%E7%9A%84%E6%88%90%E5%91%98">#</a></h2><ul>
<li>使用exports对象</li>
<li>使用module.exports导出引用类型</li>
</ul>
<h2 id="模块对象的属性"><a href="#模块对象的属性" class="headerlink" title="模块对象的属性 #"></a>模块对象的属性 <a href="#t116-%E6%A8%A1%E5%9D%97%E5%AF%B9%E8%B1%A1%E7%9A%84%E5%B1%9E%E6%80%A7">#</a></h2><ul>
<li>module.id</li>
<li>module.filename</li>
<li>module.loaded</li>
<li>module.parent</li>
<li>module.children</li>
<li>module.paths</li>
</ul>
<h2 id="包"><a href="#包" class="headerlink" title="包 #"></a>包 <a href="#t127-%E5%8C%85">#</a></h2><p>在Node.js中，可以通过包来对一组具有相互依赖关系的模块进行统一管理，通过包可以把某个独立功能封装起来 每个项目的根目录下面，一般都有一个package.json文件，定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）。npm install命令根据这个配置文件，自动下载所需的模块，也就是配置项目所需的运行和开发环境</p>
<p>项目 描述 name 项目名称 version 版本号 description 项目描述 keywords: {Array} 关键词，便于用户搜索到我们的项目 homepage 项目url主页 bugs 项目问题反馈的Url或email配置 license 项目许可证 author,contributors 作者和贡献者 main 主文件 bin 项目用到的可执行文件配置 repository 项目代码存放地方 scripts 声明一系列npm脚本指令 dependencies 项目在生产环境中依赖的包 devDependencies 项目在生产环境中依赖的包 peerDependencies 应用运行依赖的宿主包</p>
<p><a target="_blank" rel="noopener" href="https://docs.npmjs.com/files/package.json">package.json</a> <a target="_blank" rel="noopener" href="http://javascript.ruanyifeng.com/nodejs/packagejson.html">packagejson</a></p>
<h2 id="NPM"><a href="#NPM" class="headerlink" title="NPM #"></a>NPM <a href="#t138-npm">#</a></h2><ul>
<li>安装完node之后只能使用Node语言特性及核心函数，我们还需要一个系统来下载、安装和管理第三方模块</li>
<li>在Node里这个系统被称为Node包管理器(Node Package Manager,NPM)</li>
</ul>
<h3 id="npm提供的功能"><a href="#npm提供的功能" class="headerlink" title="npm提供的功能 #"></a>npm提供的功能 <a href="#t1481-npm%E6%8F%90%E4%BE%9B%E7%9A%84%E5%8A%9F%E8%83%BD">#</a></h3><ul>
<li>公共注册服务，用户可以把自己写的包上传到服务器上</li>
<li>命令行下载工具，用户可以通过npm命令把别人写的包下载到自己电脑上，还可以管理自己模块依赖的其它模块</li>
</ul>
<p>搜索第三方包的地址</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">https:<span class="comment">//www.npmjs.com/search</span></span><br></pre></td></tr></table></figure>

<h3 id="npm命令"><a href="#npm命令" class="headerlink" title="npm命令 #"></a>npm命令 <a href="#t1582-npm%E5%91%BD%E4%BB%A4">#</a></h3><h4 id="npm-install-安装包"><a href="#npm-install-安装包" class="headerlink" title="(npm install)安装包 #"></a>(npm install)安装包 <a href="#t16821-npm-install%E5%AE%89%E8%A3%85%E5%8C%85">#</a></h4><ul>
<li>打开命令行或终端，进入要安装包的目录,然后执行以下命令安装依赖的模块</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">npm install &lt;package-name&gt;</span><br><span class="line">npm i mime</span><br><span class="line">&lt;/package-name&gt;</span><br></pre></td></tr></table></figure>

<p>此命令会从服务器上下载此模块到当前目录下的node_modules目录下，如果node_modules目录不存在则会创建一个</p>
<ul>
<li>也可以安装特定的版本</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">npm install &lt;package name&gt;@&lt;version spec&gt;</span><br><span class="line">npm i mime@<span class="number">2.1</span></span><br><span class="line">&lt;<span class="regexp">/version&gt;&lt;/</span>package&gt;</span><br></pre></td></tr></table></figure>

<ul>
<li>还可以使用一个版本号范围来替换点位符</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i mime@<span class="number">2.</span>x</span><br></pre></td></tr></table></figure>

<h4 id="卸载包"><a href="#卸载包" class="headerlink" title="卸载包 #"></a>卸载包 <a href="#t17822-%E5%8D%B8%E8%BD%BD%E5%8C%85">#</a></h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">npm uninstall &lt;package name&gt;</span><br><span class="line">&lt;/package&gt;</span><br></pre></td></tr></table></figure>

<h4 id="更新包"><a href="#更新包" class="headerlink" title="更新包 #"></a>更新包 <a href="#t18823-%E6%9B%B4%E6%96%B0%E5%8C%85">#</a></h4><p>我们还可以通过以下指令更新已经安装的包</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">npm update &lt;package name&gt;</span><br><span class="line">&lt;/package&gt;</span><br></pre></td></tr></table></figure>

<h3 id="包的安装模式"><a href="#包的安装模式" class="headerlink" title="包的安装模式 #"></a>包的安装模式 <a href="#t1983-%E5%8C%85%E7%9A%84%E5%AE%89%E8%A3%85%E6%A8%A1%E5%BC%8F">#</a></h3><h4 id="本地安装"><a href="#本地安装" class="headerlink" title="本地安装 #"></a>本地安装 <a href="#t20831-%E6%9C%AC%E5%9C%B0%E5%AE%89%E8%A3%85">#</a></h4><ul>
<li>默认情况下安装命令会把对应的包安装到当前目录下，这叫本地安装，如果包里有可执行的文件NPM会把可执行文件安装到 <code>./node_modules/.bin</code>目录下</li>
<li>本地安装的模块只能在当前目录和当前目录的子目录里面使用</li>
</ul>
<h4 id="全局安装"><a href="#全局安装" class="headerlink" title="全局安装 #"></a>全局安装 <a href="#t21832-%E5%85%A8%E5%B1%80%E5%AE%89%E8%A3%85">#</a></h4><ul>
<li>如果希望安装的包能够在计算机机的所有目录下面都能使用就需要全局安装</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">npm install  -g</span><br><span class="line">npm install mime -g</span><br><span class="line">C:\Users\zhufeng\AppData\Roaming\npm\node_modules\mime</span><br></pre></td></tr></table></figure>

<ul>
<li>在全局安装的模式下，npm会把包安装到全局目录，通过此命令可以查看当前全局目录的位置</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">npm root -g</span><br><span class="line">C:\Users\Administrator\AppData\Roaming\npm\node_modules</span><br></pre></td></tr></table></figure>

<ul>
<li>如果包里有可执行文件，会把可执行文件安装到此node_modules的上一级目录中。</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">C:\Users\Administrator\AppData\Roaming\npm</span><br></pre></td></tr></table></figure>

<ul>
<li>全局安装的一般是需要在任意目录下面执行的命令，比如 <code>babel</code></li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install babel-cli -g</span><br></pre></td></tr></table></figure>

<ul>
<li>如果全局安装的命令不能用则可能是没有正确配置用户变量 <code>PATH</code>,需要在系统变量中为 <code>PATH</code>变量添加全局安装目录</li>
</ul>
<h3 id="注册、登录和发布模块"><a href="#注册、登录和发布模块" class="headerlink" title="注册、登录和发布模块 #"></a>注册、登录和发布模块 <a href="#t2283-%E6%B3%A8%E5%86%8C%E7%99%BB%E5%BD%95%E5%92%8C%E5%8F%91%E5%B8%83%E6%A8%A1%E5%9D%97">#</a></h3><ol>
<li><p>注册npm账号 <a target="_blank" rel="noopener" href="https://www.npmjs.com/">npmjs</a></p>
<p>登录</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm login</span><br></pre></td></tr></table></figure>

<p>发布</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm publish</span><br></pre></td></tr></table></figure>

</li>
</ol>
<h3 id="npx"><a href="#npx" class="headerlink" title="npx #"></a>npx <a href="#t2384-npx">#</a></h3><ul>
<li>npm 从5.2版开始，增加了 npx 命令</li>
</ul>
<h4 id="调用项目安装的模块"><a href="#调用项目安装的模块" class="headerlink" title="调用项目安装的模块 #"></a>调用项目安装的模块 <a href="#t24841-%E8%B0%83%E7%94%A8%E9%A1%B9%E7%9B%AE%E5%AE%89%E8%A3%85%E7%9A%84%E6%A8%A1%E5%9D%97">#</a></h4><ul>
<li>npx 想要解决的主要问题，就是调用项目内部安装的模块</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install -D mocha</span><br></pre></td></tr></table></figure>

<p> 一般来说，调用mocha只能在 <code>package.json</code>的scripts字段里面使用</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">&quot;scripts&quot;</span>: &#123;</span><br><span class="line">    <span class="string">&quot;test&quot;</span>: <span class="string">&quot;mocha -version&quot;</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npx mocha --version</span><br></pre></td></tr></table></figure>

<ul>
<li>npx 的原理很简单，就是运行的时候，会到node_modules/.bin路径和环境变量$PATH里面，检查命令是否存在</li>
</ul>
<h4 id="避免全局安装模块"><a href="#避免全局安装模块" class="headerlink" title="避免全局安装模块 #"></a>避免全局安装模块 <a href="#t25842-%E9%81%BF%E5%85%8D%E5%85%A8%E5%B1%80%E5%AE%89%E8%A3%85%E6%A8%A1%E5%9D%97">#</a></h4><ul>
<li>除了调用项目内部模块，npx 还能避免全局安装的模块。比如， <code>create-react-app</code>这个模块是全局安装,npx 可以运行它,而且不进行全局安装</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npx create-react-app my-react-app</span><br></pre></td></tr></table></figure>

<ul>
<li>上面代码运行时，npx 将create-react-app下载到一个临时目录，使用以后再删除</li>
</ul>
<h4 id="–no-install-参数和–ignore-existing-参数"><a href="#–no-install-参数和–ignore-existing-参数" class="headerlink" title="–no-install 参数和–ignore-existing 参数 #"></a>–no-install 参数和–ignore-existing 参数 <a href="#t26843---no-install-%E5%8F%82%E6%95%B0%E5%92%8C--ignore-existing-%E5%8F%82%E6%95%B0">#</a></h4><ul>
<li>如果想让 npx 强制使用本地模块，不下载远程模块，可以使用 <code>--no-install</code>参数。如果本地不存在该模块，就会报错</li>
<li>反过来，如果忽略本地的同名模块，强制安装使用远程模块，可以使用 <code>--ignore-existing</code>参数</li>
</ul>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/kity@2.0.4/dist/kity.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/kityminder-core@1.4.50/dist/kityminder.core.min.js"></script><script defer="true" type="text/javascript" src="https://cdn.jsdelivr.net/npm/hexo-simple-mindmap@0.2.0/dist/mindmap.min.js"></script><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/hexo-simple-mindmap@0.2.0/dist/mindmap.min.css">
    </div>

    
    
    

    <footer class="post-footer">
          <div class="post-tags">
              <a href="/tags/module-NPM/" rel="tag"># module&NPM</a>
          </div>

        

          <div class="post-nav">
            <div class="post-nav-item">
                <a href="/2022/07/09/%E5%89%8D%E7%AB%AF%E8%AE%B0%E5%BD%95%E6%95%B4%E7%90%86/node/" rel="prev" title="node">
                  <i class="fa fa-chevron-left"></i> node
                </a>
            </div>
            <div class="post-nav-item">
                <a href="/2022/07/09/%E5%89%8D%E7%AB%AF%E8%AE%B0%E5%BD%95%E6%95%B4%E7%90%86/Nuxt/" rel="next" title="Nuxt">
                  Nuxt <i class="fa fa-chevron-right"></i>
                </a>
            </div>
          </div>
    </footer>
  </article>
</div>






</div>
  </main>

  <footer class="footer">
    <div class="footer-inner">


<div class="copyright">
  &copy; 
  <span itemprop="copyrightYear">2023</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">郭泽</span>
</div>
  <div class="powered-by">由 <a href="https://hexo.io/" rel="noopener" target="_blank">Hexo</a> & <a href="https://theme-next.js.org/" rel="noopener" target="_blank">NexT.Gemini</a> 强力驱动
  </div>

    </div>
  </footer>

  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js" integrity="sha256-XL2inqUJaslATFnHdJOi9GfQ60on8Wx1C2H8DYiN1xY=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js" integrity="sha256-yt2kYMy0w8AbtF89WXb2P1rfjcP/HTHLT7097U8Y5b8=" crossorigin="anonymous"></script>
<script src="/js/comments.js"></script><script src="/js/utils.js"></script><script src="/js/motion.js"></script><script src="/js/next-boot.js"></script><script src="/js/bookmark.js"></script>

  
<script src="https://cdnjs.cloudflare.com/ajax/libs/hexo-generator-searchdb/1.4.0/search.js" integrity="sha256-vXZMYLEqsROAXkEw93GGIvaB2ab+QW6w3+1ahD9nXXA=" crossorigin="anonymous"></script>
<script src="/js/third-party/search/local-search.js"></script>

  <script class="next-config" data-name="pdf" type="application/json">{"object_url":{"url":"https://cdnjs.cloudflare.com/ajax/libs/pdfobject/2.2.8/pdfobject.min.js","integrity":"sha256-tu9j5pBilBQrWSDePOOajCUdz6hWsid/lBNzK4KgEPM="},"url":"/lib/pdf/web/viewer.html"}</script>
  <script src="/js/third-party/tags/pdf.js"></script>

  <script class="next-config" data-name="mermaid" type="application/json">{"enable":true,"theme":{"light":"default","dark":"dark"},"js":{"url":"https://cdnjs.cloudflare.com/ajax/libs/mermaid/9.1.3/mermaid.min.js","integrity":"sha256-TIYL00Rhw/8WaoUhYTLX9SKIEFdXxg+yMWSLVUbhiLg="}}</script>
  <script src="/js/third-party/tags/mermaid.js"></script>

  <script src="/js/third-party/fancybox.js"></script>


  





</body>
</html>
